<!--  -->
<template>
  <div class="">
    <div class="container">
      <div class="container-scroll">
        <van-swipe @change="onChange" class="wrapper" :width="300">
          <van-swipe-item
            class="wrapper_item"
            v-for="(item, key) in particulars"
            :key="key"
          >
            <img :src="item" alt="" />
          </van-swipe-item>
        </van-swipe>
        <div class="details-icon">
          <div class="details-icon-list">
            <van-icon
              name="wap-home-o"
              size="25"
              color="#fff"
              @click="skipto"
            />
          </div>
          <div class="details-icon-list">
            <van-icon name="cart-o" size="25" color="#fff" @click="skipgo" />
          </div>
        </div>
        <div class="commodity">
          <div class="commodity_content">
            <div class="commodity_content_title">
              <h1>
                &yen;{{ commodity.lowPrice
                }}<span v-if="discount == null"></span>
                <span v-else>{{ discount.text }}</span>
              </h1>
              <div ref="headline">{{ titelekey.keywords }}</div>
            </div>
            <div>{{ spdesc.desc }}</div>
          </div>
        </div>
        <div class="product-content-map">
          <div class="content-select">
            <van-cell is-link title="选择 尺码 颜色" @click="show = true" />
            <van-cell title="免邮费" />
            <van-cell is-link title="服务" @click="isShow = true" />
            <van-action-sheet v-model="isShow" title="标题">
              <div class="content">内容</div>
            </van-action-sheet>
          </div>
          <div class="content-evaluate">
            <van-cell is-link title="评价">
              <span>评分</span>
            </van-cell>
          </div>
          <div class="content-photo">
            <div class="photo-left">图文详情</div>
            <div class="photo-right">商品参数</div>
          </div>
          <div class="content-photo-imgs">
            <div class="photo-imgs-title">
              <h1>{{ commodity.desc }}</h1>
            </div>
            <div
              class="photo-details"
              v-for="(item, key) in detailsPhoto"
              :key="key"
            >
              <img :src="item" alt="" />
            </div>
          </div>
        </div>
      </div>

      <div class="product-content-select">
        <div>
          <van-goods-action>
            <van-goods-action-icon icon="shop-o" text="店铺" @click="onStore" />
            <van-goods-action-icon
              icon="star"
              text="已收藏"
              :color="activeColor"
              @click="onClickIcon"
            />
            <van-goods-action-button
              color="#ff82a3"
              text="加入购物车"
              @click="show = true"
            />
            <van-goods-action-button
              color="#ff4466"
              text="立即购买"
              @click="show = true"
            />
          </van-goods-action>
          <div>
            <van-popup
              v-model="show"
              closeable
              close-icon-position="top-right"
              position="bottom"
            >
              <div class="details-select">
                <div class="details-select-top">
                  <div class="details-select-topImg">
                    <img
                      :src="Dressimg"
                      alt=""
                      ref="handle"
                      @click="handleImg"
                    />
                  </div>
                  <h1>{{ Dresscolor.label }}</h1>
                  <div>
                    <div class="Dresscolor">
                      <van-grid :column-num="4">
                        <van-grid-item
                          v-for="(item, key) in Dresscolor.list"
                          :key="key"
                        >
                          <van-button
                            size="mini"
                            @click="handleIndex(item.label)"
                            :class="{ active: btnIndex == item.label }"
                            >{{ item.label }}</van-button
                          >
                        </van-grid-item>
                      </van-grid>
                    </div>
                  </div>
                  <h1>{{ DressSize.label }}</h1>
                  <div class="DressSize">
                    <van-grid>
                      <van-grid-item
                        v-for="(item, key) in DressSize.list"
                        :key="key"
                      >
                        <van-button
                          size="mini"
                          @click="handleClick(item.name)"
                          :class="{ active: bottonIndex == item.name }"
                          >{{ item.name }}</van-button
                        >
                      </van-grid-item>
                    </van-grid>
                  </div>
                  <div class="commodity">
                    <h1>数量</h1>
                    <van-stepper
                      v-model="value"
                      input-width="40px"
                      button-size="32px"
                    />
                  </div>
                  <div class="affirm">
                    <van-button
                      type="primary"
                      size="large"
                      block
                      color="#ff527c"
                      @click="handleResult()"
                      >确认</van-button
                    >
                  </div>
                </div>
              </div>
            </van-popup>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
// import skuData from "../../../public/data.js";
import { ImagePreview } from "vant"
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data () {
    //这里存放数据
    return {
      show: false,
      btnIndex: 0,
      bottonIndex: 0,
      commodity: [],
      particulars: {},
      detailsselect: {},
      Dresscolor: {},
      Dressimg: [{}],
      DressSize: [],
      value: "",
      spdesc: {},
      discount: {},
      isShow: false,
      titelekey: {},
      detailsPhoto: {},
      data: {},
      Ashow: true,
      activeColor: ''
    }
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    skipto () {
      this.$router.push("/home/shop")
    },
    skipgo () {
      this.$router.push("/home/shoppingcart")
    },
    onStore () {
      console.log("点击店铺")
    },
    onClickIcon () {
      if (this.activeColor == "") {
        this.activeColor = "#ff5275"
      } else {
        this.activeColor = ""
      }
      console.log(this.activeColor)
      // console.log("点击图标")
    },
    onClickButton () {
      console.log("点击按钮")
    },
    onChange (index) {
      console.log("当前 Swipe 索引：" + index)
    },
    handleIndex (label) {
      // console.log(label)
      this.btnIndex = label
      localStorage.setItem("color", label)
    },
    handleClick (name) {
      this.bottonIndex = name
      // console.log(name)
      localStorage.setItem("size", name)
    },
    handleImg () {
      let clickImg = this.$refs.handle.src
      // console.log(clickImg);
      ImagePreview({ images: [clickImg] })
    },
    handleResult () {
      let clickImg = this.$refs.handle.src
      let headline = this.$refs.headline.innerText
      // console.log(headline);
      localStorage.setItem("Image", clickImg)
      localStorage.setItem("headline", headline)
      let Size = localStorage.getItem("size")
      let Color = localStorage.getItem("color")
      let tradeItemIdResult = String(localStorage.getItem("tradeItemId"))
      // console.log(tradeItemIdResult);
      let titele = localStorage.getItem("headline")

      let Image = localStorage.getItem("Image")
      let comment = {
        id: tradeItemIdResult,
        size: Size,
        color: Color,
        Image: Image,
        title: titele,
      }
      // console.log(comment)
      let list = JSON.parse(localStorage.getItem("spxx") || "[]")
      // console.log(list)
      list.push(comment)
      localStorage.setItem("spxx", JSON.stringify(list))
    },
    list (tradeItemId) {
      this.$axios.get('/goods/detail?', {
        params: { itemId: tradeItemId }
      }).then((res) => {
        this.data = res.data.result
        this.particulars = this.data.topImages
        this.sales = this.data.itemServices.columns
        this.commodity = this.data.itemInfo
        //详情图
        this.detailsPhoto = this.data.detailInfo.detailImage[0].list
        // 销量
        this.spdesc = this.data.itemServices.columns[0]
        // 标题
        this.titelekey = this.data.itemInfo.seo
        console.log(this.titelekey)
        // 颜色
        this.Dresscolor = this.data.skuBarInfo
        // 第一张图片
        this.Dressimg = this.data.normalShareInfo.imageUrl
        // console.log(this.Dressimg);
        // 尺码
        this.DressSize = this.data.skuInfo.props[1]
        // 打折
        this.discount = this.data.normalPriceV2.priceTags[0]
      })
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created () {
    let tradeItemId = this.$route.params.tradeItemId
    this.list(tradeItemId)
    localStorage.setItem("tradeItemId", tradeItemId)
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted () {
    // tradeItemId = JSON.stringify(tradeItemId);
  },
  beforeCreate () { }, //生命周期 - 创建之前
  beforeMount () { }, //生命周期 - 挂载之前
  beforeUpdate () { }, //生命周期 - 更新之前
  updated () { }, //生命周期 - 更新之后
  beforeDestroy () { }, //生命周期 - 销毁之前
  destroyed () { }, //生命周期 - 销毁完成
  activated () { }, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang="less" scoped>
.container {
  .container-scroll {
    // border: 10px solid #000;
    overflow-y: scroll;
    height: 90vh;
    .notice-swipe {
      height: 40px;
      line-height: 40px;
    }

    .wrapper {
      .wrapper_item {
      }
      img {
        padding: 10px 5px;
        margin-left: -5px;
        width: 100%;
        height: 410px;
      }
    }
    .details-icon {
      position: absolute;
      right: 0;
      top: 0;
      padding: 60px 20px;
      z-index: 999;
      .details-icon-list {
        margin: 15px 0;
        padding: 10px;
        background: rgba(0, 0, 0, 0.3);
        border-radius: 50%;
      }
    }
    .commodity {
      border-bottom: 10px solid #f9f9f9;
      padding-bottom: 15px;
      .commodity_content {
        display: flex;
        align-items: baseline;
        justify-content: space-around;
        width: 360px;
        font-size: 13px;

        .commodity_content_title {
          width: 280px;

          h1 {
            font-size: 20px;
            padding: 10px 0;
            span {
              font-size: 10px;
              margin-left: 7px;
              padding: 0px 5px;
              color: #ff5275;
              background: #fff1f3;
            }
          }
        }
      }
    }
    .product-content-map {
      .content-select {
        border-bottom: 15px solid #f9f9f9;
      }
      .content-evaluate {
        border-bottom: 5px solid #f9f9f9;
      }
      .content {
        padding: 16px 16px 160px;
      }
      .content-photo {
        display: flex;
        justify-content: space-around;
        font-size: 18px;
        .photo-left {
          text-align: center;
          padding: 8px 0;
          width: 100px;
          color: #ff4466;
          border-bottom: 3px solid #ff4466;
        }
        .photo-right {
          padding: 8px 0;
        }
      }
      .content-photo-imgs {
        width: 90%;
        margin: 25px auto;
        font-size: 15px;
        .photo-imgs-title {
          h1 {
            font-weight: normal;
          }
        }
        .photo-details {
          img {
            width: 100%;
            margin-top: 15px;
          }
        }
      }
    }
  }
  .details-select {
    .details-select-top {
      // border: 1px solid #000;
      position: relative;
      .details-select-topImg {
        img {
          width: 3rem;
          height: 3.5rem;
          padding: 5px 5px;
        }
      }
      // .affirm {
      //   width: 100%;
      // }
      .active {
        // background: #fff
        border: 3px solid #f1518e;
      }
    }
  }
}
</style>
<style>
.van-sku-actions .van-button--warning {
  background: linear-gradient(to right, #f688a5, #f77c9d);
}
.van-sku-actions .van-button--danger {
  background: linear-gradient(to right, #f57295, #ff4466);
}
.van-grid-item__content--center {
  align-items: inherit;
}
</style>